"use client";
import { LuMoon, LuSun} from 'react-icons/lu'
import {themeStore} from '@/app/store/theme/index.js'
/*
*
* */
export default function Page(){
  const {dark,switchTheme} = themeStore(state => state)

  return (
    <div className={'p-10 w-3/4 mx-auto bg-slate-100 mt-10 font-mono flex flex-col gap-y-5 dark:bg-slate-900 relative'}>
      <h1 className={'text-3xl text-center font-bold dark:text-white'}>
        Rapidly build modern websites without ever leaving your HTML.
      </h1>
      <p className={'text-slate-500 dark:text-slate-100'}>
        A utility-first CSS framework packed with classes like
        <span className={'text-sky-400 font-medium'}> flex, pt-4, text-center </span>
        and
        <span className={'text-sky-400'}> rotate-90 </span>
        that can be composed to build any design, directly in your markup.
      </p>
      <button className={'bg-sky-600 w-fit text-white p-3 rounded hover:bg-slate-900 self-center dark:bg-sky-600 dark:hover:bg-sky-500'} >
        Get started
      </button>

      <button className={'p-1 bg-sky-500 absolute top-5 left-5 dark:bg-slate-600'} onClick={switchTheme}>
        {
          dark
          ? <LuSun className={'text-white text-xl'}/>
          : <LuMoon className={'text-white text-xl'}/>
        }
      </button>
    </div>
  )
}
